<!--容器组件-->
<template>
  <img src="/gg.jpg" style="display:block;margin:0 auto;width: 500px">
  <h1 style="text-align: center">我的信息</h1>
  <el-form style="width: 600px;margin: 0 auto;">
    <el-form-item label="姓名" v-model="saveUserForm.name">
      <el-input placeholder=""></el-input>
    </el-form-item>
    <el-form-item label="昵称" v-model="saveUserForm.username">
      <el-input placeholder=""></el-input>
    </el-form-item>
    <el-form-item label="ID" v-model="saveUserForm.id">
      <el-input placeholder=""></el-input>
    </el-form-item>
    <el-form-item label="联系方式" v-model="saveUserForm.phone">
      <el-input placeholder=""></el-input>
    </el-form-item>
    <el-form-item label="宠物类型" v-model="saveUserForm.petType">
      <el-input placeholder=""></el-input>
    </el-form-item>
    <el-form-item label="邮箱" v-model="saveUserForm.email">
      <el-input placeholder=""></el-input>
    </el-form-item>
  </el-form>
  <el-form-item>
    <el-button style="display:block;margin:0 auto" v-model="editUser">编辑</el-button>
    <el-button style="display:block;margin:0 auto">返回</el-button>
  </el-form-item>
</template>

<script setup>
import {onMounted,ref} from "vue";
//定义对象用来保存表单中的员工数据
const saveUserForm = ref({
  name:"",
  username: "",
  id:"",
  phone:"",
  petType:"",
  email: "",
});
//定义处理弹窗关闭的方法
const handleClose = () => {
  if(confirm('您确认要关闭弹窗吗?')){
    //关闭弹窗
    dialogVisible.value = false;
    //并且清空表单数据
    saveUserForm.value = {};
  }
}
/* 页面一加载完毕 立即执行的方法 */
onMounted(()=>{
  loadUser();
})

</script>

<style scoped>

</style>